<template>
	<view class="content">
		<view class="work-box">
			<view class="work-content">
				<view class="work-item">
					<view class="itemTitle">工单单别：
						<uv-input placeholder="" border="surround" v-model="ListData.TA002" disabled></uv-input>
					</view>
					<view class="itemTitle">工单单号：
						<uv-input placeholder="" border="surround" v-model="ListData.TA001" disabled></uv-input>
					</view>
					<view class="itemTitle">产品品名：
						<uv-input placeholder="" border="surround" v-model="ListData.TA034" disabled></uv-input>
					</view>
					<view class="itemTitle">产品品号：
						<uv-input placeholder="" border="surround" v-model="ListData.TA006" disabled></uv-input>
					</view>
					<view class="itemTitle">产品规格：
						<uv-input placeholder="" border="surround" v-model="ListData.TA035" disabled></uv-input>
					</view>
				</view>
				<view class="work-item">
					<view class="itemTitle">本工序：
						<uv-input placeholder="" border="surround" v-model="ListData.BTA003" disabled></uv-input>
					</view>
					<view class="itemTitle">本序工艺：
						<uv-input placeholder="" border="surround" v-model="ListData.BTA004" disabled></uv-input>
					</view>
					<view class="itemTitle">本序工艺说明：
						<uv-input placeholder="" border="surround" v-model="ListData.BTA024" disabled></uv-input>
					</view>
					<view class="itemTitle">工作中心/工艺商：
						<uv-input placeholder="" border="surround" v-model="ListData.BTA006" disabled></uv-input>
					</view>
					<view class="itemTitle">本工作名称：
						<uv-input placeholder="" border="surround" v-model="ListData.BTA007" disabled></uv-input>
					</view>
				</view>
				<view class="work-item">
					<view class="itemTitle">下工序：
						<uv-input placeholder="" border="surround" v-model="ListData.XTA003" disabled></uv-input>
					</view>
					<view class="itemTitle">下序工艺：
						<uv-input placeholder="" border="surround" v-model="ListData.XTA004" disabled></uv-input>
					</view>
					<view class="itemTitle">下序工序说明：
						<uv-input placeholder="" border="surround" v-model="ListData.XTA024" disabled></uv-input>
					</view>
					<view class="itemTitle">工作中心/工艺商：
						<uv-input placeholder="" border="surround" v-model="ListData.XTA006" disabled></uv-input>
					</view>
					<view class="itemTitle">下工作名称：
						<uv-input placeholder="" border="surround" v-model="ListData.XTA007" disabled></uv-input>
					</view>
				</view>
			</view>
		</view>
		<view class="textareaBox">
			<view class="">委外批次/备注：</view>
			<uv-textarea v-model="ListData.remark" placeholder="请输入内容"
				:customStyle="{ width: '90%', margin:'20px 0px' }"></uv-textarea>
		</view>
		<view class="textareaBox">
			<view class="work-item">
				<view class="itemTitle">机器设备：
					<uv-input placeholder="" border="surround" v-model="ListData.MJ002" disabled></uv-input>
				</view>
				<view class="itemTitle">人员：
					<view class="" @click="handlestaff">
						<uv-input placeholder="请选择人员" border="surround" v-model="selName" disabled @focus=""></uv-input>
					</view>
				</view>
				<view class="itemTitle">投入数量：
					<uv-input placeholder="" border="surround" v-model="ListData.TA010" disabled></uv-input>
				</view>
				<view class="" style="width: 68%;display:flex; align-items: center;">
					不良原因：
					<uni-data-select :localdata="BadreasonsList" :placeholder="BadreasonsText" :clearable="true"
						:clear="true" @change="handleSelName"></uni-data-select>
				</view>


			</view>
			<view class="work-item">
				<view class="itemTitle">在制数量：
					<uv-input placeholder="" border="surround" v-model="ListData.productionCount" disabled></uv-input>
				</view>
				<view class="itemTitle">合格数量：
					<uv-input placeholder="请输入合格数量" border="surround" v-model="ListData.standardCount" type="number"
						@blur="countTotal('standardCount', '合格数量')"></uv-input>
				</view>
				<view class="itemTitle">工废数量：
					<uv-input placeholder="请输入工废数量" border="surround" v-model="ListData.industrialCount" type="number"
						@blur="countTotal('industrialCount', '工废数量')"></uv-input>
				</view>
				<view class="itemTitle">料废数量：
					<uv-input placeholder="请输入料废数量" border="surround" v-model="ListData.scrapCount" type="number"
						@blur="countTotal('scrapCount', '料废数量')"></uv-input>
				</view>
			</view>
			<view class="work-item">
				<view class="itemTitle">调机数量：
					<uv-input placeholder="请输入调机数量" border="surround" v-model="ListData.machineCount" type="number"
						@blur="countTotal('machineCount', '调机数量')"></uv-input>
				</view>
				<view class="itemTitle">切样数量：
					<uv-input placeholder="请输入切样数量" border="surround" v-model="ListData.cutCount" type="number"
						@blur="countTotal('cutCount', '切样数量')"></uv-input>
				</view>
				<view class="itemTitle">其他报废：
					<uv-input placeholder="请输入其他报废" border="surround" v-model="ListData.otherCount" type="number"
						@blur="countTotal('otherCount', '其他报废')"></uv-input>
				</view>
				<view class="itemTitle">上道废数量：
					<uv-input placeholder="请输入上道废数量" border="surround" v-model="ListData.upperCount" type="number"
						@blur="countTotal('upperCount', '上道废数量')"></uv-input>
				</view>
			</view>
		</view>

		<view class="submit" @click="handelSub">
			提交报工
		</view>


		<!-- 人员 -->
		<uv-popup ref="staff" @change="change" mode="center" class="custom-popup" :closeable="true" z-index="999">
			<view style="padding: 30rpx;margin:  40rpx 60rpx">
				<view class="">
					<view class="contentBox">
						<view class="List-head">
							<view class="head-title">人员名字/编号：</view>
							<view class="">
								<uv-input placeholder="请输入人员名字/编号" border="surround"
									v-model="FormData.keyWord"></uv-input>
							</view>
						</view>

						<view class="">
							<view class="head-title"></view>
							<view class="search" @click="hanldeCheck">
								<view class="searchImg">
									<image src="../../static/icon/icon-sous.png" mode="widthFix"></image>
								</view>
								<view class="">搜索</view>
							</view>
						</view>
						<view class="">
							<view class="head-title"></view>
							<view class="search" @click="hanldeReset">

								<view class="">重置</view>
							</view>
						</view>
					</view>
					<view class="table-box">
						<uni-table border stripe emptyText="暂无更多数据">
							<!-- 表头行 -->
							<uni-tr>
								<uni-th align="center">人员编号</uni-th>
								<uni-th align="center">人员名称</uni-th>
								<uni-th align="center">操作</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item, index) in userForwardList" :key="index">
								<uni-td align="center">{{item.mv001}}</uni-td>
								<uni-td align="center">{{item.mv002}}</uni-td>
								<uni-td align="center">
									<view class="setbtn" @click="handleSel(item)">选择</view>
								</uni-td>
							</uni-tr>
						</uni-table>
						<!-- 分页器 -->
						<Paginator :current-page.sync="FormData.pageNum" :page-size="FormData.pageSize" :total="total"
							@change="handlePageChange" />

					</view>
				</view>
			</view>
		</uv-popup>


	</view>
</template>

<script>
	import {
		$get,
		$post
	} from '@/utils/request';
	import Paginator from '../../components/Paginator/Paginator.vue';


	export default {
		components: {
			Paginator


		},
		data() {
			return {
				receivedItem: {},
				ListData: {
					remark: '', //备注
					TA010: 0, //投入数量
					productionCount: '', //在制数量
					standardCount: '0', //合格数量
					industrialCount: '0', //工废数量
					scrapCount: '0', //料废数量
					machineCount: '0', //调机数量
					cutCount: '0', //切样数量
					otherCount: '0', //其他报废
					upperCount: '0', //上道废数量
					MV001: '', //人员编号
					badCause: '', //不良原因
					companyCode: uni.getStorageSync('companyCode')
				},
				userForwardList: [], //选择人员类型人
				selName: '', //选中人的名字
				BadreasonsList: [], //选择不良原因
				BadreasonsText: '请选择不良原因',
				CountUnm: 0, // 上限数量
				FormData: { //查询人员
					pageSize: 10,
					pageNum: 1,
					keyWord: '',
					companyCode: uni.getStorageSync('companyCode')
				},
				total: 0,
			};
		},
		onLoad(options) {
			if (options.item) {
				this.receivedItem = JSON.parse(decodeURIComponent(options.item))
			}
		},
		onShow() {
			this.getReportInfog()
		},
		methods: {
			getReportInfog() {
				$get('quality/bigScreenApp/getReportInfo', {
					TA001: this.receivedItem.TA001,
					TA002: this.receivedItem.TA002,
					TA003: this.receivedItem.TA003,
					TA004: this.receivedItem.TA004,
					TA006: this.receivedItem.TA006C,
					companyCode: uni.getStorageSync('companyCode')
				}).then(res => {
					console.log(res);
					if (res.code !== 200) {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
						return;
					}
					this.ListData = {
						...this.ListData,
						...res.data,
						...res.data.xList[0]
					};
					this.CountUnm = this.$methods.deepClone(this.ListData.productionCount)

					this.getBadReasonsList()
				})
			},
			getsendStaff() { //查询人员
				$get('quality/bigScreenApp/sendStaffList', this.FormData).then(res => {
					console.log(res);
					this.total = res.total
					this.userForwardList = res.rows
				})
			},
			handlestaff() { //人员弹窗
				this.getsendStaff()
				this.$refs.staff.open('')

			},

			handlePageChange(page) {
				this.FormData.pageNum = page
				this.getsendStaff()

			},
			hanldeCheck() { //人员弹窗搜索
				this.getsendStaff()
			},
			hanldeReset() { //人员弹窗重置
				this.FormData.keyWord = '';
				this.FormData.pageNum = 1;
				this.getsendStaff()
			},
			handleSel(item) { //人员弹窗当前选择
				this.selName = item.mv002
				this.ListData.MV001 = item.MV001
				this.$refs.staff.close('')
			},
			getBadReasonsList() { //查询不良原因
				$get('quality/bigScreenApp/getBadReasons', {
					companyCode: uni.getStorageSync('companyCode')
				}).then(res => {
					this.BadreasonsList = this.$methods.getSeleteOption(res.data, ['badCause', 'text'], [
						'code', 'value'
					])
				})
			},
			handleSelName(e) { //选中不良原因
				console.log(e);

				this.ListData.badCause = e
				// for (let i of this.userForwardList) {
				// 	if (e === i.code) {

				// 		console.log(i.code);
				// 		this.ListData.badCause = i.code
				// 		break;
				// 	}
				// }
			},
			countChange() {
				// 获取所有数量值
				const {
					standardCount,
					industrialCount,
					scrapCount,
					machineCount,
					cutCount,
					otherCount,
					upperCount,
					TA010
				} = this.ListData;

				// 转换为数字并处理空值
				const countList = [
					Number(standardCount) || 0,
					Number(industrialCount) || 0,
					Number(scrapCount) || 0,
					Number(machineCount) || 0,
					Number(cutCount) || 0,
					Number(otherCount) || 0,
					Number(upperCount) || 0
				];

				const totalNum = countList.reduce((sum, item) => sum + item, 0);
				const maxTotal = Number(TA010) || 0;
				const remaining = maxTotal - totalNum;

				// 检查是否超过限制
				if (totalNum > maxTotal) {
					uni.showToast({
						title: `总数量不能超过合格数量${maxTotal}`,
						icon: 'none',
						duration: 2000
					});
					this.ListData.productionCount = maxTotal
				} else {
					if (this.CountUnm < this.ListData.TA010) {

						this.ListData.productionCount = this.CountUnm
					} else {
						this.ListData.productionCount = remaining
					}


				}
			},
			countTotal(key, name) {
				this.ListData[key] = Number(this.ListData[key])
				if (this.ListData[key] < 0) this.ListData[key] = 0
				let number = ['standardCount', 'machineCount', 'scrapCount', 'cutCount', 'upperCount', 'otherCount',
					'industrialCount'
				]
				let total = 0
				for (let i of number) {
					total += Number(this.ListData[i])
				}
				if (total > this.ListData.ta010) {
					uni.showToast({
						title: `总数量不能超过合格数量${this.ListData.ta010}`,
						icon: 'none',
						duration: 2000
					});
					this.ListData[key] = 0
					this.computCroductionCount()
					return
				}
				this.computCroductionCount()
			},
			// 获取在制数量
			computCroductionCount() {
				const numKey = ['standardCount', 'industrialCount', 'machineCount', 'scrapCount', 'cutCount', 'upperCount',
					'otherCount'
				]
				let countTotal = this.CountUnm
				let productionCount = 0
				for (let i of numKey) {
					productionCount += Number(this.ListData[i])
				}
				this.ListData.productionCount = countTotal - productionCount
			},
			handelSub() {
				if (this.selName === '') {

					uni.showToast({
						title: `请选择人员`,
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.ListData.standardCount === '0' || this.ListData.standardCount === "") {
					uni.showToast({
						title: `请输入合格数量`,
						icon: 'none',
						duration: 2000
					});
					return
				}

				console.log(this.ListData);
				return


				$post('quality/bigScreenApp/addReportInfo', this.ListData).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: `报工成功`,
							icon: 'none',
							duration: 2000
						});
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})

			}
		}

	}
</script>

<style lang="less">
	.content {
		padding: 30px;
		box-sizing: border-box;
	}

	.textareaBox {
		width: 100%;
		padding: 30px;
		box-sizing: border-box;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin: 40px 0;
		display: flex;
		gap: 30px;
		align-items: center;
		flex-wrap: wrap;
	}


	.work-item {
		width: 30%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
		color: #333;
		font-size: 18px;

		.itemTitle {
			display: flex;
			align-items: center;
		}
	}


	.work-box {
		display: flex;
		gap: 20px;


		.work-content {
			width: 100%;
			padding: 30px;
			box-sizing: border-box;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			display: flex;
			gap: 30px;
			flex-wrap: wrap;



			.operate-box {
				width: 40%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				gap: 40px;

				.operate {

					display: flex;
					align-items: center;
					gap: 50px;

					.iconzt {
						background-color: #fff;
						border: 3px solid #2C7FEC;
					}

					.iconbf {
						background-color: #70D072;
						border: 3px solid #333;
					}

					.icondy {
						background-color: #FD8630;
						border: 3px solid #333;
					}


					.operate-btn {
						width: 80px;
						height: 80px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;

						image {
							width: 40%;
							border-radius: 50%;
						}
					}
				}

			}
		}


	}

	.submit {
		width: 120px;
		height: 30px;
		padding: 10px 0;
		background-color: #2C7FEC;
		border-radius: 4px;
		text-align: center;
		line-height: 30px;
		font-size: 18px;
		color: white;
	}

	.custom-popup {
		// width:  800rpx;
		height: 800rpx;
		border-radius: 16rpx;

		.popup-content {
			padding: 30rpx;
			width: 500px;

		}
	}

	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.List-head {
			width: 40%;	
			.head-title {
				color: #fff;
				font-size: 18px;
				margin: 10rpx 0;
			}


		}

		.search {
			padding: 15rpx 50rpx;
			display: flex;
			align-items: center;
			gap: 20rpx;
			background-color: #005aca;
			color: #fff;
			font-size: 16px;
			border-radius: 10rpx;
			margin-top: 80rpx;
			.searchImg {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
				}
			}
			
		
		}
	}

	.table-box {
		margin-top: 80rpx;

		.setbtn {
			padding: 10rpx;
			color: white;
			border-radius: 10rpx;
			background-color: #005aca;
		}
		

	}
	
	
	
	
</style>